<template>
  <div>
    <AppHeader/>
    <!-- <div id="header" style="display:flex; flex-direction: row;"> -->
      <!-- 左侧 Logo -->
      <!-- <div style="width: 40%;">
        <div id="logo">
          <img src="../assets/logo.jpg" alt="">
        </div>
      </div> -->

      <!-- 右侧导航和头像 -->
      <!-- <div style="width: 60%; display: flex; flex-direction: row; justify-content: flex-end; margin-right: 5%;">
        <div class="headerinfo"><a href="#">帮助中心</a></div>
        <div class="headerinfo"><a href="#">购物车</a></div>
        <div class="headerinfo"><a href="#">收藏夹</a></div>
        <div class="headerinfo"><a href="#">个人资料</a></div>
        <div class="headerinfo"><a href="/">退出登录</a></div> -->

        <!-- 头像下拉菜单 -->
        <!-- <el-dropdown trigger="click">
          <span class="avatar-container">
            <el-avatar
              :size="70"
              :src="avatarUrl || defaultAvatar"
              @error="handleAvatarError"
            />
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item disabled>
                用户名：{{ userInfo.name || '未知' }}
              </el-dropdown-item>
              <el-dropdown-item disabled>
                手机号：{{ userInfo.phone || '未知' }}
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div> -->

    <div style="width: 100%; height: auto;margin: 20px 0px 0px 0px;">
      <div v-if="cartValue && cartValue.length > 0">
        <div v-for="(item, index) in cartValue" :key="index" style="height: auto; width: 1000px; margin: 0 auto; display: flex;">
          <div>
            <img :src="item.image_url" alt="" style="height: 180px; width: 200px; margin: 0 auto;">
          </div>
          <div>
            <div style="height: auto; width: 400px; flex-wrap: wrap; padding: 20px;">
              名称: {{ item.g_name }}
            </div>
            <div style="padding: 20px;">
              价格: {{ item.g_sellPrice }}
            </div>
          </div>
          <div style="width: 100px; height: auto;">
            数量加减
            <el-input-number v-model="num" @change="handleChange" :min="1" :max="999" label="描述文字"></el-input-number>
            <div style="width: 100px; height: auto;margin: 40px 0px 0px 0px;">
              <button @click="openDeleteDialog(index)">删除订单</button>
            </div>
          </div>
          <div>
           
          </div>
        </div>
        <!-- 分页组件 -->
        <div class="pagination-wrapper">
          <el-pagination background layout="prev, pager, next" :total="total" :page-size="size" :current-page="page"
            @current-change="handlePageChange" />
        </div>
      </div>
      <div v-else style="height: 678px;">
        <div id="asd123" style="height: 200px; width: 1000px; margin: 0 auto; flex-wrap: wrap; font-size: larger; text-align: center;">
          请前往购买商品
        </div>
      </div>
    </div>

    <!-- 删除确认弹出框 -->
    <el-dialog
      v-model="deleteDialogVisible"
      title="确认删除"
      width="30%"
    >
      <span>是否确定删除该订单？</span>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="deleteDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="confirmDelete">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import AppHeader from '@/components/Header/AppHeader.vue'

const size = 6
const total = ref(10)
const page = ref(1)
const num = ref(1)
const cartValue = ref([]) // 初始化为空数组

// 默认头像
//const defaultAvatar = 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bc.png'

// 响应式数据
// const avatarUrl = ref('')
// const userInfo = ref({
//   image_url: '',
//   sellPrice: '',
// })

// const shopcart = await api.get('/shopcart')

const xinxi = [
  {
    image_url: 'https://gd1.alicdn.com/bao/uploaded/i1/2254228937/TB2pqExhpXXXXXkXXXXXXXXXXXX_!!2254228937.jpg',
    product_id: 3,
    g_name: '华硕a豆 adolbook14s 增强版 2021新款14英寸金属窄边框轻薄本笔记本电脑 幻彩白 第11代i7 16G 512G MX350',
    g_sellPrice: 2599,
  },
  {
    image_url: 'https://gd1.alicdn.com/bao/uploaded/i1/2254228937/TB2pqExhpXXXXXkXXXXXXXXXXXX_!!2254228937.jpg',
    product_id: 3,
    g_name: '华硕a豆 adolbook14s 增强版 2021新款14英寸金属窄边框轻薄本笔记本电脑 幻彩白 第11代i7 16G 512G MX350',
    g_sellPrice: 2599,
  },
  {
    image_url: 'https://gd1.alicdn.com/bao/uploaded/i1/2254228937/TB2pqExhpXXXXXkXXXXXXXXXXXX_!!2254228937.jpg',
    product_id: 3,
    g_name: '华硕a豆 adolbook14s 增强版 2021新款14英寸金属窄边框轻薄本笔记本电脑 幻彩白 第11代i7 16G 512G MX350',
    g_sellPrice: 2599,
  }
]

onMounted(() => {
  cartValue.value = xinxi // 将 xinxi 的数据赋值给 cartValue
})

// const handleAvatarError = () => {
//   avatarUrl.value = defaultAvatar
// }

const handleChange = (value) => {
  console.log('数量已更改:', value)
}

const handlePageChange = (newPage) => {
  page.value = newPage
  console.log('当前页码:', newPage)
}

const deleteDialogVisible = ref(false) // 控制删除确认弹出框的显示
const deleteIndex = ref(-1) // 记录要删除的订单索引

const openDeleteDialog = (index) => {
  deleteIndex.value = index
  deleteDialogVisible.value = true
}

const confirmDelete = () => {
  if (deleteIndex.value !== -1) {
    cartValue.value.splice(deleteIndex.value, 1)
  }
  deleteDialogVisible.value = false
}
</script>

<style scoped>
#header {
  height: 100px;
  background-color: rgb(255, 174, 0);
}

.headerinfo {
  margin-right: 5%;
  height: 100px;
  line-height: 100px;
  font-size: 20px;
}

.headerinfo a {
  text-decoration: none;
  color: #333;
}

.avatar-container {
  display: flex;
  align-items: center;
  margin-left: 20px;
  cursor: pointer;
}
</style>